<template>
  <div class="register-box">
    <h3>注册</h3>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      性别：
      <el-radio v-model="form.sex" label="男">男</el-radio>
      <el-radio v-model="form.sex" label="女">女</el-radio>

      <el-form-item>
        <el-button type="success" @click="register()">注册</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Register",
  data() {
    return {
      form: {
        name: '',
        password: '',
        sex: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
  register(){
    this.$.ajax({
      type: "POST",
      url: "/user/registerMan",
      data: this.form,
      success: (result) => {
        console.log("注册请求....", result);
        localStorage.setItem("user", JSON.stringify(result));
        //跳转到管理登录页
        this.$router.push("/AdminLogin");
      }
    });
  }
  }
};
</script>

<style>
 .register-box {
    width: 500px;
    height: 300px;
    border: 1px solid #cfd6e6;
    margin: 150px auto;
    padding: 20px 50px 20px 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #adabe6;
  }
</style>
